<template>
    <div class="app-container">
      <!-- 查询 -->
      <el-row>
        <el-col class="mb-2">
          <el-button type="primary" @click="search()">查询</el-button>
          <el-button title="重置" @click="refresh()">重置
            <!-- <svg-icon icon-class="refresh" /> -->
          </el-button>
          <el-button type="primary" @click="visible = true">添加</el-button>
        </el-col>
      </el-row>
  
      <!-- 列表 -->
      <el-table
        ref="table"
        v-loading="loading"
        :data="data"
        :height="height"
        stripe
        highlight-current-row
      >
        <el-table-column prop="idkey" label="模板id" sortable="custom" />
        <el-table-column prop="unique" label="模板编号" show-overflow-tooltip />
        <el-table-column prop="unique" label="模板名称" show-overflow-tooltip />
        <el-table-column prop="name" label="模板ID" show-overflow-tooltip />
        <el-table-column prop="unique" label="类型" show-overflow-tooltip />
        <el-table-column prop="unique" label="创建时间" show-overflow-tooltip />
        <el-table-column label="操作" width="95" fixed="right">
          <template #default="scope">
            <el-link type="primary" class="mr-1" :underline="false" @click="edit(scope.row)">
              修改
            </el-link>
            <el-link type="primary" :underline="false"> 删除 </el-link>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <pagination
        v-show="count > 0"
        v-model:total="count"
        v-model:page="query.page"
        v-model:limit="query.limit"
        @pagination="list"
      />
  
      <el-dialog
        v-model="visible"
        title="Tips"
        width="30%"
        :before-close="
          (done) => {
            ElMessageBox.confirm('是否关闭?')
              .then(() => {
                done()
              })
              .catch(() => {
                // catch error
              })
          }
        "
      >
        <el-form
          label-width="120px"
          :rules="{
            test1: [{ required: true, message: '请输入消息类型', trigger: 'blur' }],
            test2: [{ required: true, message: '请输入模板编号', trigger: 'blur' }],
            test3: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
            test4: [{ required: true, message: '请输入模板ID', trigger: 'blur' }]
          }"
        >
          <el-form-item label="消息类型" prop="test1">
            <el-radio-group v-model="model.test10" class="ml-4">
              <el-radio label="1" size="large">模板消息</el-radio>
              <el-radio label="2" size="large">订阅消息</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="模板编号" prop="test2">
            <el-input v-model="model.test" placeholder="请输入模板编号" clearable />
          </el-form-item>
          <el-form-item label="模板名称" prop="test3">
            <el-input v-model="model.test" placeholder="请输入模板名称" clearable />
          </el-form-item>
          <el-form-item label="模板ID" prop="test4">
            <el-input v-model="model.test" placeholder="请输入模板ID" clearable />
          </el-form-item>
          <el-form-item label="状态" prop="test5">
            <el-radio-group v-model="model.test10" class="ml-4">
              <el-radio label="1" size="large">开启</el-radio>
              <el-radio label="2" size="large">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="visible = false">提交</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import screenHeight from '@/utils/screen-height'
  import { getPageLimit } from '@/utils/settings'
  import { list } from '@/api/content/content'
  
  export default {
    name: 'ConfigTemplateMessageIndex',
    components: {},
  
    data() {
      return {
        data: [],
        loading: false,
        height: 680,
        count: 0,
        query: {
          page: 1,
          limit: getPageLimit()
        },
        visible: false,
        model: {}
      }
    },
    created() {
      this.height = screenHeight()
    },
    methods: {
      // 列表
      list() {
        this.loading = true
        list(this.query)
          .then((res) => {
            this.data = res.data.list
            this.count = res.data.count
            this.loading = false
          })
          .catch(() => {
            this.loading = false
          })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  ::v-deep .el-radio.el-radio--large {
    height: 32px;
  }
  </style>
  